<template>
	<view class="indexs">
		<view class="header header_lan" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo"><image :src="imgUrl + '/dzx_img22.png'" mode="widthFix"></image></view>
					<view class="index_wenben baise">{{ $t('page_my_daigoulist.My_daigou') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;'">
			<view class="my_dingdan_center">
				<view class="index_cardingdan">
					<view class="index_swiper">
						<!--Tab布局-->
						<view class="index_title">
							<block v-for="(item, index) in malllist" :key="index">
								<view :data-id="index" :data-type="item.type" :class="'mall_dis ' + (currentIndex == index ? 'mall_on' : '')" @tap="getcurrentid">
									<view class="mall_t1">{{ item.name }}</view>
								</view>
							</block>
							<view class="mys_xians_po" :style="'left:' + (left + 5) + 'px;'"><view class="mys_xians"></view></view>
						</view>
						<!--内容布局-->
						<view class="index_list">
							<swiper class="swiper paid_list_cont" @change="pagechange" :current="currentIndex" :style="'height:' + height + ';'">
								<block v-for="(item, index) in malllist" :key="index">
									<swiper-item>
										<view :class="'index_list_heji' + index">
											<view class="index_cardingdan_center">
												<view class="my_dingdan_list" v-if="arrlist.length != 0">
													<view class="my_dingdan_cont" v-for="(item, index1) in arrlist" :key="index1">
														<view class="my_dingdan_title">
															<view class="my_dingdan_l">
																<image :src="imgUrl + '/dzx_img27.png'"></image>
																<text>{{ item.order_sn }}</text>
															</view>
															<view class="my_dingdan_r" v-if="item.status == -1 || item.status == 8" style="color: #f33653">
																{{ $t('page_my_daigoulist.Invalid_order') }}
															</view>
															<view class="my_dingdan_r" v-if="item.status == 1">{{ $t('page_my_daigoulist.moderated') }}</view>

															<view class="my_dingdan_r" v-if="item.status == 2" style="color: #f33653">
																{{ $t('page_my_daigoulist.to_be_delivered') }}
															</view>
															<view class="my_dingdan_r" v-if="item.status == 3">{{ $t('page_my_daigoulist.way') }}</view>
															<view class="my_dingdan_r" v-if="item.status == 4">{{ $t('page_my_daigoulist.stocked') }}</view>
															<view class="my_dingdan_r" v-if="item.status == 5">{{ $t('page_my_daigoulist.Synchronous_aggregation') }}</view>
															<view class="my_dingdan_r" v-if="item.status == 6">{{ $t('page_my_daigoulist.completed') }}</view>
														</view>

														<view class="my_dingdan_txtlist">
															<view class="my_dingdan_txtcont">
																{{ $t('page_my_daigoulist.Purchase_link') }}
																<text>{{ item.url }}</text>
															</view>

															<view class="my_dingdan_txtcont">
																{{ $t('page_my_daigoulist.payment_method') }}
																<text>{{ $t('page_my_daigoulist.Balance_payment') }}</text>
															</view>
															<view class="my_dingdan_txtcont">
																{{ $t('page_my_daigoulist.forecast_time') }}
																<text>{{ item.created_time }}</text>
															</view>
															<view class="my_dingdan_txtcont">
																{{ $t('page_my_daigoulist.Commodity_price') }}
																<text>{{ item.price }}{{ $t('page_my_daigoulist.rmb') }}</text>
															</view>
															<view class="my_dingdan_txtcont">
																{{ $t('page_my_daigoulist.freight') }}
																<text>{{ item.free }}{{ $t('page_my_daigoulist.rmb') }}</text>
															</view>
															<view class="my_dingdan_txtcont">
																{{ $t('page_my_daigoulist.Total_service_charge') }}
																<text>{{ item.service_free }}{{ $t('page_my_daigoulist.rmb') }}</text>
															</view>
															<view class="my_dingdan_txtcont">
																{{ $t('page_my_daigoulist.Total_amount') }}
																<text>{{ item.total_free }}{{ $t('page_my_daigoulist.rmb') }}</text>
															</view>
															<view class="my_dingdan_txtcont">
																{{ $t('page_my_daigoulist.Specification_data') }}
																<text>{{ item.spec }}</text>
															</view>
															<view class="my_dingdan_txtcont" v-if="item.status == -1 || item.status == 8">
																{{ $t('page_my_daigoulist.Refund_amount') }}
																<text class="redss">{{ item.total_free }}{{ $t('page_my_daigoulist.rmb') }}</text>
															</view>
															<view class="my_dingdan_txtcont" v-if="item.status == -1 || item.status == 8">
																{{ $t('page_my_daigoulist.Refunded_service_charge') }}
																<text class="redss">{{ item.refund_service }}{{ $t('page_my_daigoulist.rmb') }}</text>
															</view>
															<view v-if="item.status == 5" class="my_dingdan_txtcont">
																{{ $t('page_my_daigoulist.courier_name') }}
																<text>{{ item.express_name }}</text>
															</view>
															<view v-if="item.status == 5" class="my_dingdan_txtcont">
																{{ $t('page_my_daigoulist.tracking_number') }}
																<text>{{ item.express_num }}</text>
															</view>
														</view>

														<view class="my_dingdan_btns" style="border-top: 1px solid #efefef" v-if="item.status != 8 && item.is_feed != 1">
															<view
																class="reason"
																style="
                                  text-align: left;
                                  width: 100%;
                                  display: flex;
                                  align-items: flex-start;
                                "
																v-if="item.status == -1"
															>
																<text>{{ $t('page_my_daigoulist.Audit_feedback') }}</text>
																<text style="width: 80%; text-align: justify">{{ item.reason }}</text>
															</view>
															<view
																class="my_dingdan_btns1"
																v-if="item.status <= 2 && item.status != -1 && item.status != 8"
																@tap="quxiaodingdan"
																:data-id="item.b_order_id"
															>
																{{ $t('page_my_daigoulist.cancel_order') }}
															</view>
															<view class="my_dingdan_btns1" v-if="item.status >= 6" @tap="fankui" :data-id="item.b_order_id">
																{{ $t('page_my_daigoulist.defeedback') }}
															</view>
															<!-- <view class="my_dingdan_btns2" v-if="item.status == 2" @tap="quzhifu" :data-id="item.b_order_id">去支付</view> -->
															<view class="my_dingdan_btns2" v-if="item.status >= 3 && item.status != 6" @tap="queren" :data-id="item.b_order_id">
																{{ $t('page_my_daigoulist.Confirmreceiptgoods') }}
															</view>
														</view>
													</view>
												</view>
												<view class="my_dingdan_zanwu" v-else>
													<image :src="imgUrl + '/dzx_img43.png'"></image>
													<text>{{ $t('page_my_daigoulist.no_order_yet') }}</text>
												</view>
											</view>
										</view>
									</swiper-item>
								</block>
							</swiper>
						</view>
					</view>
				</view>
			</view>

			<view class="fankui_wenben" v-if="fankuiisshow">
				<view class="fankui_wenben_banner">
					<view class="fankui_wenben_title"><input type="text" @input="neirongs" :placeholder="$t('page_my_daigoulist.placeholder')" /></view>
					<view class="fankui_wenben_btn">
						<view class="fankui_wenben_btn1" @tap="quxiaofankui">{{ $t('page_my_daigoulist.cancel') }}</view>
						<view class="fankui_wenben_btn1" @tap="querenfankui">{{ $t('page_my_daigoulist.sure') }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// pages/shouye/shouye_zkc/shouye_zkc.js
const app = getApp();

let request = require('../../../utils/require');

export default {
	data() {
		return {
			navH: app.globalData.navHeight,
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,

			malllist: [
				{
					id: 1,
					name: '全部',
					type: 0
				},

				{
					id: 3,
					name: '待审核',
					type: 1
				},
				{
					id: 4,
					name: '待发货',
					type: 2
				},
				{
					id: 5,
					name: '在途中',
					type: 3
				},
				{
					id: 6,
					name: '已完成',
					type: 6
				}
			],

			height: 0,
			heights: 0,
			currentIndex: 0,
			left: 20,
			false: false,

			//分页
			page: 1,

			ispage: true,
			arrlist: [],
			type: 1,
			isSwiper: false,
			optionsid: '',
			swipertrue: false,
			swipershow: false,

			neirongstxt: '',
			fankuiisshow: false
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */ onLoad(options) {
		var that = this;

		that.optionsid = options.id
		that.type = that.malllist[options.id].type
	},
	onShow() {
		var that = this;
		that.page = 1
		that.ispage= true
		that.arrlist=  []
		that.isSwiper=  true
		that.swipertrue=  false
		if (that.optionsid) {
			that.currentIndex = that.optionsid
		} else {
			that.currentIndex = 0
		}
		setTimeout(() => {
			that.baoguolist(that.type);
			that.changeline();
		}, 100);
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {
		if (this.ispage) {
			this.page = this.page + 1
			this.baoguolist(this.type);
		}
	},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {},
	methods: {
		neirongs(e) {
			console.log(e, 'ee??');
			this.neirongstxt = e.detail.value;
		},
		querenfankui() {
			var that = this;
			if (that.neirongstxt != '') {
				var data = {
					token: uni.getStorageSync('token'),
					content: that.neirongstxt,
					id: that.neirongid
				};
				request.post(`index.php?s=/api/Buyer/feedback&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
					that.fankuiisshow = false;
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.data
						});
						setTimeout(() => {
							that.page = 1
							that.ispage = true
							that.arrlist = []
							that.baoguolist(that.type);
						}, 1000);
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				});
			} else {
				uni.showToast({
					title: '反馈内容不可为空',
					icon: 'none'
				});
			}
		},
		fankui(e) {
			this.fankuiisshow = true;
			this.neirongid = e.currentTarget.dataset.id;
		},
		quxiaofankui() {
			this.fankuiisshow = false;
		},
		qupinglun(e) {
			uni.navigateTo({
				url: '/pages/indexs/my_dingdan_qpj/my_dingdan_qpj?id=' + e.currentTarget.dataset.id
			});
		},

		queren(e) {
			var that = this;
			uni.showModal({
				title: '提示',
				content: '确认签收该包裹？',

				success(res) {
					if (res.confirm) {
						var data = {
							token: uni.getStorageSync('token'),
							order_id: e.currentTarget.dataset.id
						};
						request.post(`index.php?s=/api/Buyer/confirm&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
							if (res.data.code == 1) {
								uni.showToast({
									title: res.data.data
								});
								setTimeout(() => {
									that.page = 1
									that.ispage = true
									that.arrlist = []
									that.baoguolist(that.type);
								}, 1000);
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
						});
					} else {
						if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				}
			});
		},
		querenqianshou(e) {
			var that = this;
			uni.showModal({
				title: '提示',
				content: '确认签收该包裹？',

				success(res) {
					if (res.confirm) {
						var data = {
							token: uni.getStorageSync('token'),
							id: e.currentTarget.dataset.id
						};
						request.post(`index.php?s=/api/package/signedin&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
							if (res.data.code == 1) {
								uni.showToast({
									title: res.data.data
								});
								setTimeout(() => {
									that.page = 1
									that.ispage = true
									that.arrlist = []
									that.baoguolist(that.type);
								}, 1000);
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
						});
					} else {
						if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				}
			});
		},

		quzhifu(e) {
			var that = this;
			uni.showModal({
				title: '提示',
				content: '确认是否支付？',

				success(res) {
					if (res.confirm) {
						var data = {
							token: uni.getStorageSync('token'),
							order_id: e.currentTarget.dataset.id
						};
						request.post(`index.php?s=/api/Buyer/BuyOrderPay&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
							if (res.data.code == 1) {
								uni.showToast({
									title: res.data.data
								});
								setTimeout(() => {
									that.page = 1
									that.ispage = true
									that.arrlist = []
									that.baoguolist(that.type);
								}, 1000);
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
						});
					} else {
						if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				}
			});
		},

		//取消订单
		quxiaodingdan(e) {
			var that = this;
			var data = {
				token: uni.getStorageSync('token'),
				order_id: e.currentTarget.dataset.id
			};
			uni.showModal({
				title: '提示',
				content: '取消将退还 代购费（物品价值+运费） 服务费 商家将另行处理',

				success(res) {
					if (res.confirm) {
						request.post(`index.php?s=/api/Buyer/cancle&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
							if (res.data.code == 1) {
								uni.showToast({
									title: res.data.data
								});
								setTimeout(() => {
									that.page = 1
									that.ispage = true
									that.arrlist = []
									that.baoguolist(that.type);
								}, 1000);
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
						});
					} else {
						if (res.cancel) {
						}
					}
				}
			});
		},

		baoguolist(e) {
			var that = this;
			var data = {
				type: e,
				token: uni.getStorageSync('token'),
				page: that.page
			};
			request.get(`index.php?s=/api/Buyer/BuyOrderList&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					if (that.page > res.data.data.last_page) {
						that.ispage = false
					} else {
						console.log(that.arrlist, '????arrlist');
						that.arrlist = that.arrlist.concat(res.data.data.data)
					}
					setTimeout(() => {
						that.swiperhegiht(that.currentIndex);
					}, 100);
				}
			});
		},

		chakanxq(e) {
			uni.navigateTo({
				url: '/pages/indexs/my_dingdan_details/my_dingdan_details?id=' + e.currentTarget.dataset.id
			});
		},

		//swiper切换时会调用
		pagechange: function(e) {
			var that = this;
			console.log(e, 'ee???');
			setTimeout(() => {
				that.currentIndex = e.detail.current
				that.type = that.malllist[e.detail.current].type
				that.page = 1
				that.ispage = true
				that.arrlist = []
				that.optionsid = e.detail.current
				that.swipershow = true
				that.changeline();
				console.log('第二次');
				that.baoguolist(that.type);
			}, 100);
		},

		//swiper单击事件
		getcurrentid(e) {
			this.currentIndex = e.currentTarget.dataset.id
		},

		//swiper选项卡的高度
		swiperhegiht(es) {
			var that = this;
			var query = uni.createSelectorQuery();
			query.selectAll('.index_list_heji' + es).boundingClientRect();
			query.exec(res => {
				var listHeight = res[0][0].height;
				that.height= listHeight + 'px'
				that.heights= res[0]
			});
		},

		//下标线左右滑动效果
		changeline: function() {
			const query = uni.createSelectorQuery();
			var that = this;
			query.select('.mall_on').boundingClientRect();
			console.log(333);
			query.exec(function(res) {
				console.log(res, '????');

				if (res[0] != null) {
					that.left = res[0].left
				} else {
					that.left = 0
				}
			});
		},

		jumpzuo() {
			uni.navigateBack();
		}
	}
};
</script>
<style>
@import './my_daigoulist.css';
</style>
